import React, { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { cartDel } from '../store/cart';
import { getNewsList } from '../store/news'

export default function Cart() {

    const dispatch = useDispatch();
    const cartList = useSelector(state => state.cart.cartList);
    const newsList = useSelector(state => state.news.newsList);

    useEffect(() => {
        dispatch(getNewsList());
    },[newsList]);



    return (
        <div style={{border:'1px solid #CCC',padding:10,borderRadius:4}}>
            <h1>文章管理</h1>
            <ol>
                {
                    newsList && newsList.map(item => (<li key={item.id}>{item.title}</li>))
                }
            </ol>
            <h1>购物车管理</h1>
            <hr />
            <table border="1" cellSpacing={0} cellPadding={10} align="center" style={{ width: '80%' }}>
                <thead>
                    <tr style={{ background: 'lightblue' }}>
                        <th>id</th>
                        <th>商品名称</th>
                        <th>商品价格</th>
                        <th>商品数量</th>
                        <th>操作</th>

                    </tr>
                </thead>
                <tbody>
                    {
                        cartList.map((item, index) => (
                            <tr key={item.id} align="center">
                                <td>{item.id}</td>
                                <td>{item.goodsname}</td>
                                <td>{item.price}</td>
                                <td>{item.num}</td>
                                <td>
                                    <button onClick={() => dispatch(cartDel(index))}>删除</button>
                                </td>

                            </tr>
                        ))
                    }

                </tbody>
            </table>
        </div>
    )
}
